<template>
  <div class="uiBigCardTop">
    <template v-for="(child, index) in children.children">
      <div class="big-card-top" :key="index" v-if="child.type === 'mArticle'">
        <div class="img-card">
          <img :src="child.model.resource.share_info.image" alt="" />
          <div class="count">
            <div class="count-n">
              <span>{{ child.model.resource.count.count_comment }}评论</span>|
              <span
                >{{ getPlay(child.model.resource.count.count_view) }}w观看</span
              >|
              <span
                ><i class="iconfont"></i
                >{{ getPlayTime(child.model.resource.duration) }}'
                {{ getPlaySecond(child.model.resource.duration) }}"
              </span>
            </div>
          </div>
        </div>

        <div class="user-btn">
          <div class="user-btn-left">
            <h5>{{ child.model.resource.title }}</h5>
            <div class="creator">
              <img :src="child.model.resource.author.userinfo.avatar" alt="" />
              <span class="work"
                >{{ child.model.resource.author.userinfo.username }}和其他<span
                  class="team"
                  >{{ child.model.resource.team_user_count }}人</span
                ><span class="guanzhu">关注</span></span
              >
            </div>
          </div>
          <div class="user-btn-right">
            <div class="icon">
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-dianzan"></i>
               
            </div>
            <div class="icon-nub">
                 <span>{{ child.model.resource.count.count_like }}</span>

            <span>{{ child.model.resource.count.count_collect }}</span>
            </div>
          
        
          </div>
              <i class="iconfont icon-diandian"></i>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: ["children"],
  methods: {
    getPlay: function (value) {
      return (value / 10000).toFixed(2);
    },
    getPlayTime: function (times) {
      return parseInt(times / 60);
    },
    getPlaySecond: function (times) {
      return parseInt(times % 60);
    },
  },
};
</script>

<style lang="less" scoped>
.uiBigCardTop {
  width: 100%;
  margin: 10px;
  background: white;
  .big-card-top {
    .img-card {
      width: 100%;
      position: relative;
      img {
        width: 100%;
        height: 200px;
        display: block;
        border-radius: 10px 10px 0 0;
      }
      .count {
        position: absolute;
        bottom: 0;
        right: 0;
        color: white;
        font-size: 13px;
        margin-bottom: 5px;
        .count-n {
          span {
            margin: 5px;
          }
        }
      }
    }

    .user-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      margin: 0 10px;
      color: #777;
      .user-btn-left {
        width: 70%;
        h5 {
          margin: 0;
          font-size: 16px;
          margin: 5px 0px;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          height: 42px;
          color: #002;
        }
        .creator {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            border-radius: 50%;
          }
          .work {
            color: #002;
            margin: 0 4px;
            .team {
              margin: 0 4px;
            }
            .guanzhu {
              color: rgb(241, 70, 70);
              font-weight: 600;
            }
          }
        }
      }
      .user-btn-right {
        display: flex;
        flex-wrap: wrap;
        .icon{
            width: 100%;
            display: flex;
            justify-content: space-evenly;
             i {
          font-size: 24px;
        }
        }
        .icon-nub{
            display: flex;
            justify-content: space-evenly;
            width: 100%;
        }
       
      }
    }
  }
}
</style>